<template>
	<div class="zh-archives-list">
		<nav-header></nav-header>

        <div class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width" style="width: 130px" v-if="user_level === 0">
						<el-select v-model="schoolId" filterable placeholder="请选择状态">
						    <el-option
						      v-for="item in schoolList"
						      :key="item.id"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						</el-select>
					</div>
                    <div class="open-width" style="width: 145px">
                        <el-cascader
                            placeholder="请选择班级"
                            :options="gradeList"
                            :props="claddDataProps"
                            @active-item-change="changeAddItem"
                            v-model="gradeId">
                        </el-cascader>
                    </div>
                    <div class="open-width">
                        <el-input v-model="keyword" placeholder="账号、姓名、学号" @keyup.enter.native="searchList"></el-input>
                    </div>
                    <el-button type="primary" @click="searchList">搜索</el-button>
                    <el-button type="primary" @click="resetList">重置</el-button>
                </div>
                
                <div class="zh-open-right fr">                
                    <el-button type="primary" @click="linkTo('', 1)">批量导入</el-button>
                    <el-button type="primary" @click="exportSelect">导出所选</el-button>
                    <el-button type="danger" @click="batchEmpty">批量清空</el-button>
                </div>
            </div>
            <div class="zh-table-contents"
                v-loading="loading.status"
                :element-loading-text="loading.txt">
                <el-table
                    :data="listData"
                    @selection-change="tableSelectionChange"
                    border
                    max-height="600"
                    style="width: 100%">
                    <el-table-column
                        type="selection"
                        width="50"
                        align="center" fixed>
                    </el-table-column>
                    <!-- <el-table-column
                        label="序号"
                        align="center"
                        show-overflow-tooltip
                        width="50">
                    </el-table-column> -->
                    <el-table-column
                        prop="number"
                        label="学校"
                        align="center"
                        v-if="user_level === 0"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="number"
                        label="账号"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="真实姓名"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="rename"
                        label="班级"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="性别"
                        align="center"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{scope.row.sex == 1 ? '男' : '女'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="study_code"
                        label="学号"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="teacher_name"
                        label="班主任"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="parent_name"
                        label="家长"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="telphone"
                        label="联系方式"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="addr"
                        label="家庭住址"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        width="200">
                        <template slot-scope="scope">
                            <el-button v-if="user_level !== 0" @click="linkTo(scope.row.id, 2)" type="text">编辑</el-button>
                            <el-button v-if="user_level === 0" @click="linkTo(scope.row.id, 4)" type="text">详情</el-button>
                            <el-button @click="linkTo(scope.row.id, 3)" type="text" >变更记录</el-button>
                            <el-button v-if="user_level !== 0" @click="clearRow(scope.row)" type="text" class="delete-button">清空</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="table-pagination" v-show="total_number > 10">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="fileParams.page_index"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="fileParams.pae_size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total_number">
                    </el-pagination>
                </div>
            </div>
        </div>
	</div>
</template>

<script>
  	export default {
	    data() {
	      	return {
                rowLen: 0,
                schoolId: null, // 学校id
	      		loading:{
					status: false,
					txt: '获取数据...',
                },
                gradeList: [], // 年级列表
                schoolList: [],
	        	fileParams:{
                    app_code: JSON.parse(sessionStorage.getItem('user_info_str')).app_code,
	        		org_id: null,
	        		keyword: '',
					page_index: 1,
					page_size: 10,
				},
				keyword: '',
	        	total_number:0,
				selected:[],
	        	claddDataProps:{
	        		value: 'id',
                    label: 'name',
	        	},
	        	gradeId: [],
                listData: [],
                user_multistage: JSON.parse(sessionStorage.getItem('user_multistage')), // 判断当前是否为多级版本
                user_level: sessionStorage.getItem('user_level') == 'undefined' ? undefined : JSON.parse(sessionStorage.getItem('user_level')), /*判断当前登录会员是否教育局 */
	      	};
	    },
	    created(){
            this.getList();
            this.getAllGrade();
	    },
	    methods: {
            /**
             * 动态加载班级次级选项
             * @param {Array} val 选中值的 id
             */
            changeAddItem(val) {
                if (val.length > 1) return;

                let success = (res => {
                    this.gradeList.forEach(item => {
                        if (item.id === val[0]) {
                            item.children = [];
                            
                            res.data.forEach(tem => {
                                item.children.push({
                                    id: tem.id,
                                    name: tem.name
                                })
                            })
                        }
                    })
                });

                let params = {
                    grade_id: val[0],
                    // get_end_class: 1
                }

                this.$ajax.get('api/org/get_class_by_grade_code', {params, func: {success: success}})
            },
            /**
             * 获取全部年级
             */
            getAllGrade() {
                let success = (res => {
                    this.gradeList = [];

                    if (!is_empty(res.data)) {
                        res.data.forEach(item => {
                            this.gradeList.push({
                                id: item.id,
                                name: item.name,
                                children: []
                            })
                        })

                        this.$forceUpdate();//强制渲染
                    }
                });
                
                this.$ajax.get('api/org/all_grade', {params: {}, func: {success: success}});
            },
            /**
             * 跳到变更记录页面
             * @param {Number} id 记录id
             * @param {Number} key 标识
             */
            linkTo(id, key) {
                switch(key) {
                    case 1:
                        this.$router.push("/user/studystatus/studystatus-import")                        
                        break;
                    case 2:
                        this.$router.push('/user/studystatus/archives-edit/' + id);
                        break;
                    case 3:
                        this.$router.push('/user/studystatus/change-log/' + id)
                        break;
                    case 4:
                        this.$router.push('/user/studystatus/archives-edit/' + id + '?level=detail');
                        break;
                }
            },
            /**
             * 根据筛选条件获取列表
             */
	    	searchList(){
                this.fileParams.keyword = this.keyword;
				this.fileParams.org_id = this.gradeId[this.gradeId.length - 1];
                this.fileParams.page_index = 1;
                
				this.getList();
            },
            /**
             * 重置筛选条件
             */
			resetList() {
				this.keyword = '';
				this.fileParams = {
	        		org_id: null,
	        		keyword: '',
					page_index: 1,
					page_size: 10,
				}
				this.gradeId = [];
				this.getList();
            },
            /**
             * 获取档案列表
             */
		    getList(){
		    	this.loading.status = true;
		    	
				let success = (res => {
					this.loading.status =  false
					this.listData = res.data.data;
					this.total_number = res.data.data_sum;
					this.$forceUpdate(); // 强制渲染
                });
                
  				this.$ajax.get('api/studystatus/get_studystatus_list', {params: this.fileParams, func: {success: success}})
            },
            /**
             * 清空数据
             * @param {String || Array} param 删除数据的 id
             */
            clearData(param) {
                this.loading.status = true;
		    	
				let success = (res => {
                    this.$message.success(res.msg);

                    if (this.listData.length - this.rowLen === 0) {
                        if (this.fileParams.page_index > 1) {
                            this.fileParams.page_index-- ;
                        } else {
                            this.fileParams.page_index = 1;
                        }
                    }

                    this.getList();
                });
                let fail = (res => {
                    this.loading.status = false;
                    this.$message.error(res.msg);
                })
                
  				this.$ajax.delete('api/studystatus/clean_studystatus', {params: {id: param}, func: {success: success, fail: fail}});
            },
            /**
             * 清空一条记录
             * @param {Object} obj 记录信息
             */
		    clearRow(obj){
				let yes = (res => {
                    this.rowLen = 1;
                    this.clearData(obj.id);
				})
                let cancel = (res => {})
                
				this.e_confirm({yes: yes, cancel: cancel, txt: `清空档案信息后不可恢复，确定将 ${obj.number} 档案信息清空吗？`});
            },
            /**
             * 批量清空
             */
			batchEmpty(){
				if(this.selected.length === 0) {
					this.$message.warning("请选择要删除的项");
					return false;
                }
                
				let yes = (res => {
                    this.rowLen = this.selected.length;
                    
                    let arr = [];
                    this.selected.forEach(item => {
                        arr.push(item.id);
                    })

					this.clearData(arr);
				})
                let cancel = (res => {})
                
				this.e_confirm({yes: yes, cancel: cancel, txt: '确认后将会清空选中档案的填入信息，若要完全删除档案可通过删除该账号进行删除'});
			},
			/**
             * 选中记录
             * @param {Array} val 选中的id
             */
		    tableSelectionChange(val) {
                this.selected = val;
            },
            /**
             * 每页数量
             */
		    handleSizeChange(val) {
		    	this.fileParams.page_index = 1;
                this.fileParams.page_size = val;
                
		    	this.getList();
            },
            /**
             * 翻页
             */
		    handleCurrentChange(val) {
                this.fileParams.page_index = val;
                
		    	this.getList();
            },
            /**
             * 导出选中的记录
             */
			exportSelect(){
				if(this.listData.length === 0 || this.selected.length === 0){
					this.$message.warning("导出的数据为空！")
					return false;
                }

                let _id = [];
                this.selected.forEach(item => {
                    _id.push(item.id);
                })

                let params = {
                    id: _id,
                    // get_end_class: 1,
                    keyword: this.keyword ? this.keyword : null,
                    org_id: this.gradeId.length > 0 ? this.gradeId[this.gradeId.length - 1] : null,
                    app_code: this.fileParams.app_code ? this.fileParams.app_code: null
                }

                this.export_excel('api/studystatus/download_student_status', params, '档案管理');
	    	},
        },
  	};
</script>
<style lang="scss">
    .zh-archives-list {

    }
</style>